<template>
	<view class="container">
		<view class="nullorder" v-if="total==0">
			<image class="imageone" src="https://dysx-h5.shjiuliwl.com/Eblock/images/zwddjl.png"></image>
			<view class="nulltext">暂无订单记录</view>
		</view>
		<view class="order" v-else>
			<view class="order_item" v-for="(item,index) in userorder" :key="index">
				<view class="item_oder">
					<view class="num">订单编号：{{item.order_num}}</view>
					<view class="copy" @tap="copy(item.order_num)"> |  复制</view>
				</view>
				
				<view class="item_tiontwo">
					<view class="tit">购买套餐：</view>
					<view class="text">{{item.order_desc}}</view>
				</view>
				<view class="item_tion">下单时间：{{ item.create_time }}</view>
				<view class="item_tion">卡片数量：{{item.card_count}}张</view>
				<view class="item_tion" v-show="item.is_risk==null">无风险提示：{{ '---'}}</view>
				<view class="item_tion" v-show="item.is_risk!=null">无风险提示：{{ item.is_risk==0?'支持':'不支持'}}</view>
				<view class="item_tion">套餐价格：{{item.money/100}}元</view>
				<view class="item_tion">支付方式：{{item.pay_type=='ZFB_H5'?'支付宝':'微信'}}</view>
				<view class="item_tion">支付状态：
					<span v-show="item.pay_state == 1" style="color: rgba(42, 130, 228, 1);">已支付</span>
					<span v-show="item.pay_state == 0" style="color: rgba(255, 87, 51, 1);">未支付</span>
				</view>
			</view>

		</view>
	</view>
</template>		

<script>
import { onGotApiData } from '../../utils/api.js';
	export default {
		data() {
			return {
				userId:'', //userid
				total:0, //订单的总数
				userorder:[], //订单的列表
			}
		},
			// 获取首页基础信息
		onLoad(options) {
			this.userId = uni.getStorageSync('dysx_userId')||''
			// 查询会员信息
			this.getuserorder()
		},
		// 页面初次渲染完成时执行的代码
		onReady() {

		},
		// 页面卸载时触发
		onUnload() {

		},
		// 页面隐藏时触发
		onHide() {	
			
		},
		methods: {
			// 查询会员信息
			getuserorder(){
				let params = {
					user_id:this.userId,
				}
				onGotApiData('/wxxcx_api/mine/v1/order_list','GET',params,this.userorder_value)
			},
			// 会员信息结果
			userorder_value(result){
				console.log('result',result)
				if(result.code == 200){
					this.userorder = result.data.list
					this.total = result.data.total
				}
			},
			// 复制订单号
			copy(order){
				wx.setClipboardData({
					data: order,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		padding: 10rpx 0 0 0;
		overflow: auto;
		font-family: '思源黑体';	
		.nullorder{
			width: 750rpx;
			height: 600rpx;
			padding-top: 100rpx;
			margin: 0 auto;
			.imageone{
				width: 600rpx;
				height: 500rpx;
				margin: 75rpx;
			}
			.nulltext{
				width: 500rpx;
				height: 60rpx;
				margin: 0 auto;
				margin-top: -140rpx;
				text-align: center;
				font-size: 32rpx;
				line-height: 60rpx;
				color: rgba(128, 128, 128, 1);
			}
		}
		.order_item{
			width: 730rpx;
			// height: 500rpx;
			padding: 20rpx 0;
			margin: 0 auto;
			margin-top: 30rpx;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			.item_oder{
				width: 670rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				display: flex;
				justify-content: space-between;
				.num{
					width: 550rpx;
					height: 50rpx;
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(128, 128, 128, 1);
					// border: 1px solid black;

				}
				.copy{
					width: 120rpx;
					height: 50rpx;
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(0, 0, 0, 1);
					text-align: right;
					// border: 1px solid black;
				}
			}
			.item_tion{
				width: 670rpx;
				height: 70rpx;
				margin: 0 auto;
				font-size: 28rpx;
				line-height: 70rpx;
				color: rgba(56, 56, 56, 1);
			}
			.item_tiontwo{
				width: 670rpx;
				// height: 70rpx;
				margin: 0 auto;
				font-size: 28rpx;
				line-height: 70rpx;
				color: rgba(56, 56, 56, 1);
				display: flex;
				.tit{
					width: 140rpx;
					// border: 1px solid black;
				}
				.text{
					width: 530rpx;
					// line-height: 70rpx;
					// border: 1px solid black;
				}
			}	
		}
		#myVideo{
			width: 700rpx;
			height: 300rpx;
			border: 1px solid black;
		}
	}
</style>
